<!-- src/views/banner/add.vue -->
<script lang="ts" setup>
import { ref } from 'vue'
import { addBanner } from '@/api/banner'
import { useRouter  } from 'vue-router';
const alt = ref<string>('')
const link = ref<string>('')
const img = ref<string>('')

const bannerImg = ref()
const selectImg = () => {
  // 获取文件的信息
  const file = bannerImg.value.files[0]
  console.log(file)

  // 读取文件的信息
  const reader = new FileReader()
  // 文件转base64
  reader.readAsDataURL(file)

  reader.onload = function () {
    // this.result 就是结果
    img.value = this.result?.toString()!
  }
}
const router = useRouter()
const addBannerFn = () => {
  addBanner({
    img: img.value,
    alt: alt.value,
    link: link.value
  }).then(() => {
    router.back()
  })
}
</script>

<template>
  <div class="addBanner">
    <el-input v-model="alt" placeholder="提示信息"></el-input>
    <el-input v-model="link" placeholder="跳转链接"></el-input>
    <input ref="bannerImg" type="file" @change="selectImg"/>

    <!-- <el-input v-model="img" hidden placeholder="图片链接"></el-input>

    <el-image :src="img"/> -->
    <el-button type="primary" @click="addBannerFn">添加</el-button>
  </div>
</template>
